const path = require('path');
// entry 入口文件,告诉资源从哪里开始  默认./src/index.js
// output 出口文件,打包好的文件资源输出到哪里    默认./dist/main.js
// loader webpack 只能识别js/json 处理其他类型的文件，就需要使用 loader 进行转换。 翻译官
// loader 执行的顺序,从右到左,从下到上
// plugins 插件,执行更广泛的任务,打包,优化,压缩
// mode  模式 development 开发, production 生产模型,压缩,优化,兼容

// output 是一个对象 
// filename 指定解析的文件的名字,默认是main.js
module.exports = {
  entry: "./src/myindex.js",
  output: {
    filename: 'bundle.js',
    // 指定生成文件路径
    path: path.resolve(__dirname, 'chunk'),
    clean: true, // 在生成文件之前清空 output 目录
  },
  // 组件,模块
  module: {
    // ,不同的文件需要 配合不同的loader配合使用
    rules: [
      // 正则表达式, 使用的加载器,翻译官
      {
        test: /\.css$/,
        use: [
          // 创建style 然后放到html中head 中
          'style-loader',
          // 将css 文件 当做模块加载到js 中,这时候还是字符串
          'css-loader'
        ]
      },

      // webpack5最新通过添加 4 种新模块类型来替换所有这些加载器loader：
      // asset/resource发出一个单独的文件并导出 URL。以前可以通过使用file-loader.
      // asset/inline导出资产的数据 URI。以前可以通过使用url-loader.
      // asset/source导出资产的源代码。以前可以通过使用raw-loader.
      // asset自动在导出数据 URI 和发出单独的文件之间进行选择。以前可以通过使用url-loader资产大小限制来实现。

      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: "[name].[hash:6][ext]"
          // 将图片放到指定文件夹中
          // filename: "img/[name].[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 小于8KB的图片会被转成base64编码
          },
        },
      },
      // 缺点 无法引入 html中的图片
    ],
  },
  mode: 'development'
  // mode:'production'
};